<template>
  <div class="product-intro-container">
    <search-menu @search="handleSearch" @reset="handleReset" class="search">
      <InputItem lable="知识标题">
        <el-input placeholder="请输入" v-model="searchForm.title"></el-input>
      </InputItem>
      <InputItem lable="知识分类">
        <el-select placeholder="请选择" v-model="searchForm.sort">
          <el-option
            v-for="(item, i) in searchOptions"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </InputItem>
      <InputItem lable="发布时间">
        <el-date-picker
          type="date"
          placeholder="请选择"
          v-model="searchForm.time"
        ></el-date-picker>
      </InputItem>
    </search-menu>
    <div class="table">
      <el-button @click="handleAdd" type="primary" class="add-button">
        新增
      </el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="知识标题"> </el-table-column>
        <el-table-column prop="sort" label="知识类别"> </el-table-column>
        <el-table-column prop="detailedSort" label="细分类别">
        </el-table-column>
        <el-table-column prop="source" label="信息来源"> </el-table-column>
        <el-table-column prop="time" label="发布时间"> </el-table-column>
        <el-table-column label="公开状态">
          <template slot-scope="scope">
            <div class="op-buttons">
              <el-switch
                active-text="公开"
                inactive-text="隐藏"
                v-model="scope.row.state"
                @change="
                  (val) => {
                    handleSwitch(scope.row, val);
                  }
                "
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="op-buttons">
              <TableButton @click="handleEdit(scope.row)">编辑</TableButton>
              <TableButton @click="handleDelete(scope.row)">删除</TableButton>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <customPagination
        :paginationData="paginationData"
        @getList="handleGetList"
      ></customPagination>
    </div>
    <el-dialog :visible.sync="showAddDialog" width="80%" title="新增">
      <el-form :model="addDialogData" :rules="dialogFormRules" ref="addForm">
        <el-form-item label="知识标题:" prop="title" class="outer-dialog-item">
          <el-input
            placeholder="请输入"
            v-model="addDialogData.title"
            class="outer-dialog-input"
          ></el-input>
        </el-form-item>
        <div class="dialog-line">
          <el-form-item
            label="细分类别:"
            prop="detailedSort"
            class="dialog-item"
          >
            <el-cascader
              :props="{ multiple: true }"
              :options="sortOptions"
              @change="handleCascaderChange"
              v-model="addDialogData.detailedSort"
              class="dialog-input"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="信息来源:" prop="source" class="dialog-item">
            <el-input
              placeholder="请输入"
              v-model="addDialogData.source"
              class="dialog-input"
            ></el-input>
          </el-form-item>
        </div>
        <div class="dialog-line">
          <el-form-item label="知识标签:" prop="tags" class="dialog-item">
            <el-select
              filterable
              multiple
              placeholder="请输入"
              v-model="addDialogData.tags"
              class="dialog-input"
            >
              <el-option
                v-for="(item, i) in searchOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="关联文章:"
            prop="relatedArticles"
            class="dialog-item"
          >
            <el-select
              filterable
              multiple
              placeholder="请输入"
              v-model="addDialogData.relatedAricles"
              class="dialog-input"
            >
              <el-option
                v-for="(item, i) in searchOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="封面" prop="cover">
          <ImgUploader v-model="addDialogData.cover" />
        </el-form-item>
        <el-form-item label="摘要" prop="snippet">
          <el-input
            class="textarea"
            type="textarea"
            v-model="addDialogData.snippet"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <quill-editor
            ref="QuillEditor"
            :quillcon.sync="addDialogData.article"
          ></quill-editor>
        </el-form-item>
        <div class="buttons">
          <el-button
            type="plain"
            @click="
              () => {
                this.showAddDialog = false;
              }
            "
            >取消</el-button
          >
          <el-button type="primary" @click="handleView(editDialogData)"
            >预览</el-button
          >
          <el-button type="primary" @click="handleAddSubmit">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="showEditDialog" title="新增"> </el-dialog>
    <el-dialog :visible.sync="showViewDialog" title="预览"></el-dialog>
  </div>
</template>

<script>
import SearchMenu from "@/components/common/SearchMenu.vue";
import reset from "@/utils/reset";
import InputItem from "@/components/common/InputItem.vue";
import customPagination from "@/components/customPagination/index.vue";
import TableButton from "@/components/common/TableButton.vue";
import ImgUploader from "@/components/common/ImgUploader.vue";
import cancelWarning from "@/mixins/cancelWarning";
export default {
  mixins: [cancelWarning],
  components: {
    SearchMenu,
    InputItem,
    customPagination,
    TableButton,
    ImgUploader,
  },
  data() {
    return {
      showAddDialog: false,
      showEditDialog: false,
      showViewDialog: false,
      searchForm: {
        title: "",
        sort: "",
        time: "",
      },
      defaultVals: {
        title: "",
        sort: "",
        time: "",
      },
      searchOptions: [],
      paginationData: {
        pageSize: 10,
        pageIndex: 1,
        total: 100,
      },
      tableData: [],
      defaultDialogData: {
        title: "",
        detailedSort: [],
        source: "",
        tags: [],
        relatedAricles: [],
        snippet: "",
        article: "",
        state: false,
      },
      addDialogData: {
        title: "",
        detailedSort: [],
        source: "",
        tags: [],
        relatedAricles: [],
        snippet: "",
        article: "",
        state: false,
      },
      addSortCopy: [],
      editDialogData: {
        title: "",
        detailedSort: [],
        source: "",
        tags: [],
        relatedAricles: [],
        snippet: "",
        article: "",
        state: false,
      },
      dialogFormRules: {
        title: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 20, message: "长度不能超过20个字符", trigger: "blur" },
        ],
        detailedSort: [
          { required: true, message: "请选择类别", trigger: "blur" },
        ],
        source: [
          { required: true, message: "请输入信息来源", trigger: "blur" },
        ],
        cover: [{ required: true, message: "请添加封面", trigger: "change" }],
        snippet: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 200, message: "长度不能超过200个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    setPage() {},
    handleSearch() {},
    handleReset() {
      reset(this.searchForm, this.defaultVals);
    },
    handleGetList() {},
    handleSwitch(rowData, val) {
      //发送请求
    },
    handleAdd() {
      this.showAddDialog = true;
      this.addDialogData = {};
    },
    handleEdit(rowData) {
      this.showEditDialog = true;
      this.editDialogData = {
        ...rowData,
      };
    },
    handleAddSubmit() {
      console.log(this.addDialogData);
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          // 发出请求 ...

          this.$message.success("添加成功");
          this.addDialogData = {
            ...this.defaultDialogData,
          };
          this.showAddDialog = false;
          this.setPage();
        } else {
          this.$message.error("请正确填写信息");
        }
      });
    },
    handleEditSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          // 发出请求 ...

          this.$message.success("编辑成功");
          this.showEditDialog = false;
          this.setPage();
        } else {
          this.$message.error("请正确填写信息");
        }
      });
    },
    handleCascaderChange(val) {
      function equal(val1, val2) {
        for (let i = 0; i < 3; i++) {
          if (val1[i] !== val2[i]) {
            return false;
          }
        }
        return true;
      }
      const addedEle = val.find((it) => {
        for (const ele of this.addSortCopy) {
          if (equal(it, ele)) {
            return false;
          }
        }
        return true;
      });
      this.addDialogData.detailedSort = val.filter((it) => {
        return it[0] === addedEle[0];
      });
      this.addSortCopy = [...this.addDialogData.detailedSort];
    },
  },
  async created() {
    window.addDialogData = this.addDialogData;
    this.tableData = [
      {
        title: "《工业互联网专项工作组2023年工作计划》印发",
        sort: "政策",
        detailedSort: "工业互联网、上云服务",
        source: "工业和信息化部信息通信管理局",
        time: "2023-06-25 22:22:22",
        state: true,
      },
      {
        title: "《工业互联网专项工作组2023年工作计划》印发",
        sort: "政策",
        detailedSort: "工业互联网、上云服务",
        source: "工业和信息化部信息通信管理局",
        time: "2023-06-25 22:22:22",
        state: false,
      },
      {
        title: "《工业互联网专项工作组2023年工作计划》印发",
        sort: "政策",
        detailedSort: "工业互联网、上云服务",
        source: "工业和信息化部信息通信管理局",
        time: "2023-06-25 22:22:22",
        state: true,
      },
    ];
    this.searchOptions = [
      {
        label: "选项1",
        value: "1",
      },
      {
        label: "选项2",
        value: "2",
      },
    ];
    this.sortOptions = [
      {
        value: 1,
        label: "Asia",
        children: [
          {
            value: 2,
            label: "China",
            children: [
              { value: 3, label: "Beijing" },
              { value: 4, label: "Shanghai" },
              { value: 5, label: "Hangzhou" },
            ],
          },
          {
            value: 6,
            label: "Japan",
            children: [
              { value: 7, label: "Tokyo" },
              { value: 8, label: "Osaka" },
              { value: 9, label: "Kyoto" },
            ],
          },
          {
            value: 10,
            label: "Korea",
            children: [
              { value: 11, label: "Seoul" },
              { value: 12, label: "Busan" },
              { value: 13, label: "Taegu" },
            ],
          },
        ],
      },
      {
        value: 14,
        label: "Europe",
        children: [
          {
            value: 15,
            label: "France",
            children: [
              { value: 16, label: "Paris" },
              { value: 17, label: "Marseille" },
              { value: 18, label: "Lyon" },
            ],
          },
          {
            value: 19,
            label: "UK",
            children: [
              { value: 20, label: "London" },
              { value: 21, label: "Birmingham" },
              { value: 22, label: "Manchester" },
            ],
          },
        ],
      },
      {
        value: 23,
        label: "North America",
        children: [
          {
            value: 24,
            label: "US",
            children: [
              { value: 25, label: "New York" },
              { value: 26, label: "Los Angeles" },
              { value: 27, label: "Washington" },
            ],
          },
          {
            value: 28,
            label: "Canada",
            children: [
              { value: 29, label: "Toronto" },
              { value: 30, label: "Montreal" },
              { value: 31, label: "Ottawa" },
            ],
          },
        ],
      },
    ];
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/componentCommon.scss";
.product-intro-container {
  @include pageComp;
  .dialog-line {
    display: flex;
    width: 100%;
    .dialog-item {
      // display: inline-block;
      width: 50%;
      .dialog-input {
        width: 68%;
      }
    }
  }
  .outer-dialog-item {
    width: 100%;
    // display: flex;
    .outer-dialog-input {
      width: 85%;
    }
  }
  .textarea {
    width: 90%;
  }
}
</style>
